// 公共样式
%common {
  width: 100px;
  height: 100px;
}
body {
  background-color: skyblue;
}

.big {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  // background-color: lightslategray;
  animation: li 2s ease-in-out 0s infinite alternate;
  // 正方形
  .box {
    background-color: lightgoldenrodyellow;
    @extend %common;
    margin: 0 auto;
    margin-top: 100px;
    transform: rotate(45deg);
    position: relative;
    animation: heart 2s ease-in-out 0s infinite alternate;
    // 圆形
    &::before {
      content: "";
      @extend %common;
      border-radius: 50%;
      background-color: lightgoldenrodyellow;
      position: absolute;
      left: -50px;
      top: 0;
      animation: yuan 2s ease-in-out 0s infinite alternate;
    }
    // 圆形
    &::after {
      content: "";
      @extend %common;
      border-radius: 50%;
      background-color: lightgoldenrodyellow;
      position: absolute;
      left: 0px;
      top: -50px;
      animation: yuan 2s ease-in-out 0s infinite alternate;
    }
  }
}

@keyframes heart {
  0% {
    transform: rotate(45deg) scale(0.5);
  }
  50% {
    transform: rotate(45deg) scale(2);
    background-color: pink;
  }

  100% {
    transform: rotate(45deg) scale(0.5);
  }
}
@keyframes yuan {
  50% {
    background-color: pink;
  }
  to {
    background-color: lightgoldenrodyellow;
  }
}
@keyframes li {
  to {
    transform: translateY(300px);
  }
}
